<template>
  <div id="login">
    <!-- 头部盒子 -->
    <div class="head">
      <img src="../images/label/default.jpeg" alt />
    </div>
    <!-- 登录 盒子-->
    <div class="loginBox">
      <van-cell-group inset>
        <van-field v-model="phone" label="手机号" type="tel" placeholder="请输入手机号" />
        <van-field v-model="password" label="密码" type="password" placeholder="请输入密码" />
      </van-cell-group>
      <div class="buttonGroup">
        <van-button round type="primary" @click="login">登录</van-button>
        <van-button round type="default" @click="loginMy">登录mozz的账号</van-button>
      </div>
    </div>
  </div>
</template>

<script>
//保存cookie
import { Notify } from "vant";
export default {
  props: ["parentmsg"],
  data: function() {
    return {
      phone: "",
      password: ""
    };
  },
  methods: {
    login() {
      if (
        this.phone == null ||
        this.password == null ||
        this.phone.length != 11
      ) {
        Notify({ type: "warning", message: "请正确输入", duration: 500 });
        return false;
      }
      this.$http
        .get(
          "login/cellphone?phone=" + this.phone + "&password=" + this.password
        )
        .then(result => {
          if (result.data.code == 400) {
            Notify({
              type: "danger",
              message: "手机号或密码错误",
              duration: 500
            });
            this.password = "";
          }
          // console.log(result.body.cookie);
          let cookie = result.body.cookie;
          let uid = result.data.account.id;
          // console.log(uid);
          //保存cookie到本地
          if (typeof Storage !== "undefined") {
            // 存储cookie
            localStorage.setItem("cookie", cookie);
            // 存储uid
            localStorage.setItem("uid", uid);
          } else {
            // 抱歉！不支持 Web Storage ..
            alert("不支持本地存储");
          }
          // 跳转到主页
          this.$router.replace({path:"/"});
          Notify({ type: "success", message: "登录成功", duration: 500 });
        });
    },
    loginMy() {
      this.phone = "17728923051";
      this.password = "shuaiqimo.";
      this.login();
    }
  }
};

//向外暴露cookie
export var cookie = 123;
</script>

<style lang="scss">
#login {
  .head {
    height: 200px;
    width: 100%;
    overflow: hidden;
    img {
      margin-top: -30%;
      width: 100%;
    }
  }
  .loginBox {
    padding: 5%;
    margin: 5%;
    // width: 80%;
    border-radius: 10px;
    box-shadow: 5px 5px 8px #888888;
    .buttonGroup {
      text-align: center;
      button {
        margin: 5% 0 0 5%;
      }
    }
  }
}
</style>